<!--防错管理板块-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">防错管理</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              style="width: 160px">
          </el-input>
          <el-tree
              style="margin: 10px 8px;"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree"></el-tree>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="防错分析" name="fifth"></el-tab-pane>
              <el-tab-pane label="防错清单" name="first">
              </el-tab-pane>
              <el-tab-pane label="防错验证指导书" name="second">配置管理</el-tab-pane>
              <el-tab-pane label="防错验证管理" name="third">角色管理</el-tab-pane>
              <el-tab-pane label="防错添加计划" name="fourth">
                <work-project
                 :tableData="workProject"
                 :userName="userName"
                 :userNmb="userNmb"
                 :userPurview="userPurview"
                 style="height: 70vh;overflow-y: auto;"/>
              </el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->


    <!--抽屉放置区域-->
  </div>
</template>

<script>

import WorkProject from "@/components/utils/workProject.vue";

export default {
  name: "equipmentMaintain",
  components: {WorkProject},
  data() {
    return {
      activeName:'first',
      //记录工作项目列表的清单，给子组件传递
      workProject:[],
      //查询出后台的用户名
      userName:'',
      //查询出后台的用户工号
      userNmb:'',
      //查询出后台用户的权限
      userPurview:'',
    }
  },
  watch: {},
  methods: {
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index===3){
        //查询列表数据，传递给子组件
        this.$request.post('/queryAll').then(result => {
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            this.workProject= result.data
          }
        })
      }
    },
  },
  mounted() {

    this.userNmb=localStorage.getItem('userName').replace(/("|')/g, '')
    //向后端查询用户的权限
    this.$request.post('/problemUsePurview',
        {
          userName:this.userNmb,
          filed:'pokayoke',
        }).then(result => {
      if (result.code === 401) {
        this.$router.push('UserLogin')
        alert("您未登录，请登录")
      } else {
        this.userName=result.data.name
        this.userPurview=result.data.pokayoke
      }
    })

    this.$request.post('/queryAll').then(result => {
      if (result.code === 401) {
        this.$router.push('UserLogin')
        alert("您未登录，请登录")
      } else {
        this.workProject= result.data
      }
    })
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>